<template>
  <div>
    <el-row class="">
      <el-col :span="20">优惠卷列表</el-col>
      <el-col
        :span="4"
        align="right"
      >
        <el-button
          type="success"
          @click="receiveCouponsEv"
        >领取优惠劵</el-button>
      </el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-row>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </data-table>
    </el-row>
    <!-- 领取优惠劵弹窗 -->
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <ReceiveCoupons
        :receiveCoupons="true"
        :clientId="fromdata.id"
        @close="dialogClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import { clientCouponPage } from '@/api/after-sale/client/coupon'
import baseMixin from '@/mixins/base'
import ReceiveCoupons from '@/views/after-sale/client-manage/coupon/index';//领取优惠劵

export default {
  name: 'carInfo',
  components: { ReceiveCoupons },
  props: {
    fromdata: Object
  },
  mixins: [
    baseMixin({
      findData: clientCouponPage,
      dataName: ['content', 'totalRecords'],
      format (res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data () {
    return {
      visible: false,
      dialogTitle: '领取优惠劵',
      tableColumnAttributes: [
        { name: '名称', value: 'name', type: 'text' },
        {
          name: '有效期', value: '', type: 'render', render: (row) => {
            if (row.expireDay) {
              return `领取后${row.expireDay}天过期`
            } else {
              return row.validEndTime
            }
          }
        },
        { name: '类型', value: 'classify', type: 'text' },
        { name: '消费满', value: 'discountPrice', type: 'text' },
        { name: '抵扣金额', value: 'denomination', type: 'text' },
        { name: '适用门店', value: 'storeName', type: 'text' },
        { name: '渠道类型', value: 'ditchType', type: 'text' },
        { name: '状态', value: 'status', type: 'text' }
      ],
      rules: [],
    }
  },
  async created () {
    this.searchOptions.clientId = this.fromdata.id
  },
  methods: {
    receiveCouponsEv () {
      this.visible = true;
    },
    dialogClose () {
      this.visible = false;
      this.setTableData();
    },
    changeType (item) {
      this.selectedTypeText = item.label;
    },
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
